<template>
  <div class="app-container">
    <div class="head-container">
      <!-- 搜索 -->
      <el-input v-model="query.name" size="small" clearable placeholder="输入名称或者描述搜索" style="width: 350px;" class="filter-item" @keyup.enter.native="crud.toQuery" />

      <el-select
        v-model="query.runningStatus"
        class="filter-item"
        clearable
        placeholder="请选择运行状态"
        style="width: 200px;"
        @change="crud.toQuery"
      >
        <el-option
          v-for="item in dict.running_status"
          :key="item.id"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <div style="float: right">
        <!--分页组件-->
        <pagination />
      </div>
    </div>

    <div class="page-container content">
      <div v-if="isInit" class="layer">
        <div
          v-for="project in projectList"
          :key="project.id"
          class="workload noselect"
          :class="{ready: project.runningStatus===RUNNING_STATUS_ALIVE, error: project.runningStatus===RUNNING_STATUS_DEATH, unknown: project.runningStatus===RUNNING_STATUS_UNKNOWN}"
          @click="onShowProjectDetail(project.projectId)"
        >
          <div class="project-title">
            {{ project.dpServer.name }}
          </div>
          <div class="label" style="padding-top: 5px;margin-bottom: 2px;">
            <template v-if="project.runningStatus === RUNNING_STATUS_ALIVE">
              CPU: {{ project.cpu }}m / 內存: {{ project.mem }}MiB
            </template>
          </div>
          <div style="padding-top: 5px;margin-bottom: 2px;">
            <template v-if="project.runningStatus !== RUNNING_STATUS_UNKNOWN">
              <el-row :gutter="20">
                <el-col
                  :span="10"
                >
                  <div class="label">
                    当前副本:
                    <span style="font-weight: 800;" :class="{validreplicas: project.availableReplicas>0, invalidreplicas: project.availableReplicas===0}">
                      {{ project.availableReplicas }}
                    </span>
                  </div>
                </el-col>
                <el-col
                  :span="10"
                >
                  <div class="label">
                    计划副本:
                    <span style="font-weight: 800; color: black;">
                      {{ project.replicas }}
                    </span>
                  </div>
                </el-col>
              </el-row>
            </template>
            <template v-else>
              <div style="color: #cfcfcf;border: none; text-align: left;">
                未知状态
              </div>
            </template>
          </div>

          <div class="text_time">
            <span>
              命名空间：{{ project.k8sNamespace }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import CRUD, { presenter, header, crud } from '@crud/crud'
import pagination from '@crud/Pagination'
import global_const from '@/mixins/global_const'

export default {
  name: 'Dpserver',
  dicts: ['deploy_status', 'deploy_stage', 'running_status'],
  components: {
    pagination
  },
  cruds() {
    return CRUD({ url: 'api/dpUserServer', title: '项目列表', queryOnPresenterCreated: false })
  },
  mixins: [presenter(), header(), crud(), global_const],
  data() {
    return {
      permission: {},
      loading: null,

      isInit: false
    }
  },
  computed: {
    ...mapGetters([
      'env'
    ]),
    projectList() {
      return this.crud.data
    }
  },
  watch: {
  },
  created() {
    this.crud.page.size = 50
    this.crud.optShow = {
      add: false,
      edit: false,
      del: false,
      download: false
    }
  },
  mounted() {
    this.crud.toQuery()
    this.$bus.$on('global-env-change', data => {
      this.crud.toQuery()
    })
  },
  beforeDestroy() {
    this.$bus.$off('global-env-change')
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
      this.query.env = this.env

      this.loading = this.$loading({
        lock: true,
        text: '正在加载，请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    [CRUD.HOOK.afterRefresh]() {
      this.isInit = true
      if (this.loading != null) {
        this.loading.close()
      }
    },

    doEdit() {
    },

    onShowProjectDetail(projectId) {
      this.$router.push(`/deploy/dpserverdetail?projectId=${projectId}`)
    }
  }
}
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }

  .ready {
    border: 1px dashed #234883;
    background-color: #e9edf3;
    color: #234883;
  }

  .error {
    background-color: #feedee;
    border: 1px dashed #f44656;
    color: red;
  }

  .unknown {
    background-color: #ffffff;
    border: 1px dashed #606266;
    color: #cfcfcf;
  }

  .validreplicas {
    color: green;
  }

  .invalidreplicas {
    color: red;
  }

  .label {
    color: #919191
  }

  .text_time {
    font-size: 14px;
    font-weight: 500;
    margin-top: 5px;
    width: 100%;
  }

  .content {
    display: inline-block;
    padding: 10px 15px 0px 15px;
    overflow-x: auto;
    background-color: #fafafa;

    .layer {
      margin-bottom: 10px;
      padding: 0 10px;
      text-align: left;
    }
  }

  .workload {
    width: 220px;
    margin-right: 10px;
    margin-bottom: 15px;
    display: inline-block;
    padding: 10px;
    vertical-align: top;
    border-radius: 8px;
    text-align: left;
    font-size: 13px;
    transition: .2s;

    &:hover {
      background-color: #96cdcd;
      cursor: pointer;
    }

    .project-title {
      margin-top: 2px;
      margin-bottom: 10px;
      font-weight: 600;
      font-size: 14px;
    }
  }

  .noselect {
    user-select: none;
  }

  .project-list {
    display: flex;
    flex-flow: row wrap;
    line-height: 1.8;
    .project-item {
      background-color: #f5f7fa;
      border-radius: 10px;
      padding: 20px;
      margin: 20px 0 0;
      box-sizing: border-box;
      border: 1px solid #eee;
      width: 100%;
      cursor: pointer;
      span {
        display: inline-block;
        width: 50%;
        text-align: right;
      }
      .name {
        font-weight: bold;
        text-align: center;
        font-size: 18px;
      }
      &.error {
        border-color: red;
      }
      &.warning {
        border-color: #FFBA00;
      }
      .indicator-error {
        color: red;
      }
      .indicator-warning {
        color: #FFBA00;
      }
    }
  }
</style>
